import React, { useState } from 'react'
import './index.less'
import { Button, Tabs, Table, Form, Drawer, Space, Input, message } from 'antd'
import { render } from 'react-dom';
export default function Index() {
  const [form] = Form.useForm();
  const [focusOnTableData, setFocusOnTableData] = useState<any>([]);
  const [likeCollectData, setLikeCollectData] = useState<any>([]);
  const [tabActiveKey, setTabActiveKey] = useState('1'); // 1 关注 + 点赞 + 收藏  2 点赞 + 收藏
  const [open, setOpen] = useState(false);

  const focusOnTableColumns = [
    {
      title: tabActiveKey === '1' ? 'ID' : '文章链接',
      dataIndex: 'id',
      key: 'id',
      render: (data: any, row: any) => {
        return tabActiveKey === '1' ? row?.id : row?.like;
      }
    },
    {
      title: '任务量',
      dataIndex: 'taskVolume',
      key: 'taskVolume',
    },
    {
      title: '已经完成数量',
      dataIndex: 'quantityCompleted',
      key: 'quantityCompleted',
    },
    {
      title: '状态',
      dataIndex: 'state',
      key: 'state',
      render: (data: number) => {
        return data === 1 ? '进行中' : "排队中"
      }
    },
  ];

  const onClose = () => {
    setOpen(false);
    form.resetFields();
  };


  const onOK = async () => {
    const formValues = await form.validateFields();
    if (tabActiveKey === '1') {
      const updateData = {
        ...formValues,
        state: 1,
        quantityCompleted: 200,
      }
      setFocusOnTableData([
        ...focusOnTableData,
        updateData
      ]);
    }
    if (tabActiveKey === '2') {
      const updateData = {
        ...formValues,
        state: 1,
        quantityCompleted: 200,
      }
      setLikeCollectData([
        ...likeCollectData,
        updateData,
      ])
    }
    message.success('提交成功');
    onClose();
  }
  return (
    <div className='layout-warpper'>
      <div className='content-wrapper'>
        <div className='left-content'>
          <div className='left-content-title'>
            <div>账户列表</div>
            <div>账户个数：100 </div>
          </div>
          <div className='left-fetch'>
            <Button type='primary'>刷新</Button>
          </div>
          {
            [1, 2, 3, 4, 5, 6, 7, 8, 10]?.map(item => {
              return <div className='left-item'>
                <div className='left-item-title'>
                  <div className='left-item-title-text'>小红书账户：</div>
                  <div className='left-item-title-value'>{item}</div>
                </div>
                <div className='left-item-title'>
                  <div className='left-item-title-text'>账户ID:</div>
                  <div className='left-item-title-value'>{item}</div>
                </div>
              </div>
            })
          }
        </div>
        <div className='right-content'>
          <div className='right-content-header'>
            <Button type='primary' onClick={() => setOpen(true)}>添加任务</Button>
          </div>
          <div className='right-tabs'>
            <Tabs accessKey="1" onChange={v => {
              setTabActiveKey(v);
            }} items={[
              {
                key: '1',
                label: '关注',
              },
              {
                key: '2',
                label: '点赞/收藏',
              }
            ]} />
          </div>
          <Table bordered columns={focusOnTableColumns} dataSource={tabActiveKey === '1' ? focusOnTableData : likeCollectData} />
        </div>
      </div>
      <Drawer open={open} width={600} title='添加内容' onClose={onClose} footer={
        <Space>
          <Button type='primary' onClick={onOK}>提交</Button>
          <Button onClick={onClose}>取消</Button>
        </Space>
      }>
        <Form form={form} layout='vertical'>
          {tabActiveKey === '2' && <Form.Item label='点赞链接' name='like' rules={[{ required: true, message: '请输入点赞链接' }]}  >
            <Input />
          </Form.Item>}
          {tabActiveKey === '1' && <Form.Item name='id' label='小红书账号ID' rules={[{ required: true, message: '请输入小红书账号ID' }]}>
            <Input placeholder='请输入' />
          </Form.Item>}
          <Form.Item name='taskVolume' label='任务量' rules={[{ required: true, message: '请输入任务量' }]}>
            <Input placeholder='请输入' />
          </Form.Item>

        </Form>
      </Drawer>
    </div>
  )
}
